<template>
    <div class="homenav">
        <ul class="homenav-list">
            <li class="homenav-list-item">首页</li>
            <li class="homenav-list-item">源码下载</li>
            <li class="homenav-list-item">网站模板</li>
            <li class="homenav-list-item">站长素材</li>
            <li class="homenav-list-item">网页特效</li>
            <li class="homenav-list-item">站长咨询</li>
            <li class="homenav-list-item">软件下载</li>
            <li class="homenav-list-item">建站工具</li>
            <li class="homenav-list-item">建站教程</li>
            <li class="homenav-list-item">程序插件</li>
            <li class="homenav-list-item">网站基础</li>
            <li class="homenav-list-item">帮助中心</li>
            <li class="homenav-list-item">更多&gt;&gt;</li>
        </ul>
        <div class="homenav-search">
            <div class="homenav-search-form">
                <input class="search-input" type="text" placeholder="请输入关键字搜索...">
                <span class="search-btn" @click="goSearch"><img class="search-icon" src="../assets/img/icon/white-search.png"><span class="search-text">搜索</span></span>
            </div>
            <div class="homenav-search-hotkeys">
                <span class="homenav-search-hotkeys-tt">热门搜索：</span>
                <span class="homenav-search-hotkeys-item">国潮科技</span>
                <span class="homenav-search-hotkeys-item">边框</span>
                <span class="homenav-search-hotkeys-item">中国风</span>
                <span class="homenav-search-hotkeys-item">标签</span>
                <span class="homenav-search-hotkeys-item">光祥云</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    methods:{
        goSearch(){
            this.$emit('goSearch');
        }
    }
};
</script>

<style lang="less" scoped>
.homenav{
    padding:30px 100px;
    margin-top:15px;
    margin-bottom:45px;
    box-shadow: 0 0 15px 10px @normal-bg-color;
    border-radius:8px;
    color:@main-font-color;
    font-size:@main-font-size;
    .homenav-list{
        display:flex;
        justify-content: space-between;
        .homenav-list-item{
            cursor:pointer;
        }
    }
    .homenav-search{
        .homenav-search-form{
            margin:30px 60px;
            font-size:0;
            .search-input{
                width:80%;
                font-size:@main-font-size;
                outline:none;
                border:0;
                box-sizing: border-box;
                height:54px;
                line-height:54px;
                padding:0px 40px;
                background:#ededf0;
                border-bottom-left-radius: 50px;
                border-top-left-radius: 50px;
                color:@main-font-color;
            }
            .search-btn{
                display:inline-block;
                width:20%;
                font-size:@main-font-size;
                outline:none;
                border:0;
                box-sizing: border-box;
                height:54px;
                line-height:54px;
                text-align:center;
                background:linear-gradient(45deg, #fda912 0%,#f18316 100%);
                border-bottom-right-radius:50px;
                border-top-right-radius:50px;
                color:#ffffff;
                cursor:pointer;
                .search-icon{
                    width:20px;
                    height:20px;
                    vertical-align: middle;
                    margin-right:6px;
                }
                .search-text{
                    display:inline-block;
                    vertical-align: middle;
                }
            }
        }
        .homenav-search-hotkeys{
            color:#a6a6a6;
            .homenav-search-hotkeys-tt{}
            .homenav-search-hotkeys-item{
                margin-right:12px;
                cursor: pointer;
            }
        }
    }
}
</style>